<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>	
		*{
			margin: 0px;
			padding: 0px;
		}
		a{
			text-decoration:none;
		}
		.four-zc{
			width: 1360px;
			margin: auto;
		}
		.four-zc-top{
			width: 1360px;
			margin-bottom: 50px;
			border-bottom: 2px solid rgb(230 230 230);
		}
		.four-text-userNum{
			border: 1px solid rgb(200 200 200);
			height: 30px;
			width: 300px;
		}
		.four-text-userName{
			border: 1px solid rgb(200 200 200);
			height: 30px;
			width: 300px;
		}
		.four-text-userPass{
			border: 1px solid rgb(200 200 200);
			height: 30px;
			width: 300px;
		}
		.four-zc-body{
			margin: auto;
		}
		.four-zc-table{
			line-height: 100px;
			margin: auto;
		}
		.four-td1{
			width: 100px;
			text-align: right;
		}
		.four-td2{
			width: 400px;
			text-align: center;
		}
		.four-td3{
			text-align: left;
			color:red;
		}
		.four-zc-anNiu{
			width: 1360px;
			margin-top: 20px;
			margin-left: 580px;
		}
		.four-zc-anNiu-body{
			margin-top: 30px;
			border: none;
			height: 30px;
			width: 200px;
			color: white;
			background-color: rgb(150 150 150);
		}
		.four-zc-anNiu-body:hover{
			background-color: red;
		}
		.four-zc-checkbox{
			color: rgb(100, 100, 100);
			width: 400px;
			font-size: 15px;
			margin-top: 20px;
			margin-left: 580px;
		}
		.four-zc-top-img{
			text-align: center;
		}
		.four-zc-top-body{
			margin-left: 75px;
		}
		.four-zc-body-top{
			text-align: center;
			margin-bottom: 30px;
		}
		.four-zc-top-logo{
			color: red;
			font-size: 40px;
		}
		.four-zc-top-logo a{
			color: red;
		}
		.four-zc-top-biaoQian{
			color: rgb(200, 200, 200);
		}
		.four-zc-body-top2,.four-zc-body-top1,.four-zc-body-top3{
			display: inline-block;
		}
		.four-zc-body-top1{
			border-bottom: 3px solid red;
		}
		.four-zc-body-top1-one{
			font-weight:bold ;
			width: 30px;
			height: 30px;
			color: white;
			border-radius: 50%;
			background-color: red;
		}
		.four-zc-body-top1-one,.four-zc-body-top1-body{
			display: inline-block;
		}
	</style>
</head>
<body>
	<form action="UserServlet">
		<div class="four-zc">	
			<div class="four-zc-top">
				<div class="four-zc-top-img">
					<a href=""><img src="gz.jpg" alt=""></a>
				</div>
				<div class="four-zc-top-body">
					<h1><span class="four-zc-top-logo"><a href="">终点中文网</a></span><span class="four-zc-top-biaoQian">&nbsp&nbsp|&nbsp&nbsp</span>用户注册</h1>
				</div>
			</div>
			<div class="four-zc-body">
				<div class="four-zc-body-top">
					<div class="four-zc-body-top1">
						<div class="four-zc-body-top1-one">
							<h2>1</h2>
						</div>
						<div  class="four-zc-body-top1-body">
							<h2>填写注册信息</h2>
						</div>
					</div>
					<div class="four-zc-body-top2">
						<h2>&nbsp;|&nbsp;</h2>
					</div>
					<div class="four-zc-body-top3">
						<h2>注册成功</h2>
					</div>
				</div>
				<table  class="four-zc-table">
					<tr>
						<td class="four-td1">手机号</td>
						<td class="four-td2"><input type="text" class="four-text-userNum" placeholder="请输入手机号" name="userNum"></td>
						<td class="four-td3">${sessionScope.userPhonePrompt }${sessionScope.userPhonePromptZC }</td>
					</tr>
					<tr>
						<td class="four-td1">昵称</td>
						<td class="four-td2"><input type="text" class="four-text-userName" placeholder="请输入昵称" name="userName"></td>
						<td class="four-td3">${sessionScope.userNickNamePrompt }</td>
					</tr>
					<tr>
						<td class="four-td1">密码</td>
						<td class="four-td2"><input type="text" class="four-text-userPass" placeholder="请输入密码     6-20个字符"  name="userPass"></td>
						<td class="four-td3">${sessionScope.passPrompt }</td>
					</tr>
					<tr>
						<td class="four-td1">确认密码</td>
						<td class="four-td2"><input type="text" class="four-text-userPass" placeholder="请再次输入密码"  name="userPassAgain"></td>
						<td class="four-td3">${sessionScope.passPromptAgain }</td>
					</tr>
				</table>
				<div class="four-zc-checkbox">
					<input type="checkbox" class="four-zc-anNiu-c">我已阅读并同意 <a href="#">《用户服务协议》</a> 和 <a href="#">《隐私政策》</a>
				</div>
				<div class="four-zc-anNiu">
					<input type="submit" value="确认注册" class="four-zc-anNiu-body">
				</div>
			</div>
		</div>
	</form>
</body>
</html>